<template>
  <div class="home">
    <div></div>
    <div class="classify">
      <div class="nav-left">
        <Leftitem
          v-for="(item,index) in navone"
          :key="index"
          :item="item"
          :selectIndex="selectIndex"
          :index="index"
          
        ></Leftitem>
      </div>

      <div class="nav-right">
        <div v-for="(item,index) in navtwo" :key="index" >
          <div class="right-item">
            <span>
              <img :src="item.icon" />
            </span>
             <span>{{item.name}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Leftitem from "../components/Leftitem";
export default {
  components: {
    Leftitem
  },
  mounted() {
    this.$store.dispatch("getclassify");
  },
  computed: {
    navone: function() {
      //返回store中的数组
      return this.$store.state.classify.navone;
    },
    navtwo: function() {
      return this.$store.state.classify.navtwo;
    },
    selectIndex: function() {
      return this.$store.state.classify.selectIndex;
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.nav-left {
  flex: 1;
  height: 10.5rem;
  border: 1px solid red;
  overflow: scroll;
}
.classify {
  display: flex;
  justify-content: space-between;
}
.nav-right {
  flex: 4;
  height: 10.5rem;
  overflow: scroll;
}
.right-item {
  width: 1.8rem;
  height: 2rem;
  float: left;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;

}
.right-item img{
  width: 1.5rem;
  height: 1.5rem;
}
</style>
